<template>
  <div class="appeal-manage-paeg">
    <el-card class="box-card" style="width: 100%; border: none;" shadow="never">
      <el-row :gutter="20" class="num-card">
        <el-col :span="8">
          <div class="item">
            <span>累计申诉</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计涉及音值</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>累计涉及金额</span>
            <p>12312.0012</p>
            <em />
          </div>
        </el-col>
      </el-row>

      <el-form :inline="true" label-position="top" :model="searchForm" class="demo-form-inline">
        <el-form-item label="买家UID" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="会员UID" />
        </el-form-item>
        <el-form-item label="卖家UID" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="会员UID" />
        </el-form-item>

        <el-form-item label="订单编号" size="small" style="margin-right: 20px">
          <el-input v-model="searchForm.datetime" placeholder="订单编号" />
        </el-form-item>

        <el-form-item label="状态" size="small" style="margin-right: 20px">
          <el-select v-model="searchForm.datetime" placeholder="请选择">
            <el-option
              v-for="item in [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }, {
                value: '选项3',
                label: '蚵仔煎'
              }]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="查询时间" size="small" style="margin-right: 20px">
          <el-date-picker
            v-model="searchForm.datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="操作" size="small">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; border: none; margin: 20px 0;" shadow="never">
      <el-table
        ref="multipleTable"
        :data="tableData.filter(data => data.name.toLowerCase())"
        style="width: 100%; margin-top: 20px"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />

        <el-table-column
          label="会员UID"
          prop="date"
        />
        <el-table-column
          label="会员手机"
          prop="name"
        />
        <el-table-column
          label="待划转音值"
          prop="name"
        />
        <el-table-column
          label="音值"
          prop="name"
        />
        <el-table-column
          label="音波"
          prop="name"
        />

        <el-table-column
          label="冻结音波"
          prop="name"
        />

        <el-table-column
          label="今日买入音值"
          prop="name"
        />

        <el-table-column
          label="今日卖出音值"
          prop="name"
        />

        <el-table-column
          label="信用度"
          prop="name"
        />

        <el-table-column
          label="身份证号"
          prop="name"
        />

        <el-table-column
          label="状态"
          prop="name"
        />

        <el-table-column
          label="注册时间"
          prop="name"
        />

        <el-table-column
          label="最后登录时间"
          prop="name"
        />

        <el-table-column
          label="登录IP"
          prop="name"
        />

        <el-table-column
          label="常用地"
          prop="name"
        />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="80"
        >
          <el-button
            size="mini"
            type="primary"
            @click="openAdjudication(scope)"
          >裁决</el-button>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>

    <el-dialog title="凭证清单" width="500px" :visible.sync="voucherVisible">
      <el-form label-width="100px" :model="searchForm">
        <el-form-item label="卖家收款方式">
          <div>支付宝   赵日天    123124512</div>
          <div>银行卡   赵日天   农业银行天河支行 1231阿瑟打算的1123123</div>
        </el-form-item>

        <el-form-item label="买家凭证">
          <div style="display: flex;flex-wrap: wrap;">
            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />

            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />

            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />
            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />
          </div>
        </el-form-item>

        <el-form-item label="卖家凭证">
          <div style="display: flex;flex-wrap: wrap;">
            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />

            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />

            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />
            <el-image
              style="width: 100px; height: 100px; margin: 0 0 10px 10px"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :preview-src-list="srcList"
            />
          </div>
        </el-form-item>
        <div style="text-align: center">
          <el-button style="width: 200px" type="primary" @click="onSubmit">裁决</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog title="裁决" width="300px" :visible.sync="adjudicationVisible">
      <el-form size="small" label-position="top" :model="adjudicationForm" label-width="110px" label-suffix="：">
        <el-form-item label="结果">
          <el-radio-group v-model="adjudicationForm.id">
            <el-radio :label="1">买家胜述</el-radio>
            <el-radio :label="2">卖家胜诉</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="扣除买家信用度">
          <el-select v-model="adjudicationForm.id" placeholder="请选择">
            <el-option
              v-for="item in [{
                                value: '0',
                                label: '0'
                              }, {
                                value: '1',
                                label: '1'
                              }, {
                                value: '2',
                                label: '2'
                              },
                              {
                                value: '3',
                                label: '3'
                              }]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注申诉结果">
          <el-input
            v-model="adjudicationForm.id"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'AppealManage',
  data() {
    return {
      searchForm: {
        datetime: ''
      },
      tableData: [{
        id: 1,
        name: '123'
      }
      ],
      avoucherForm: {
        id: ''
      },
      adjudicationForm: {
        id: ''
      },
      multipleSelection: [],
      voucherVisible: true,
      adjudicationVisible: false,
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    // 搜索查询
    searchSubmit() {
      alert('搜索')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 裁决之刃
    openAdjudication(index, row) {
      this.adjudicationVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './style.scss';
</style>
